<template>
    <el-main>
        <el-table 
        :data="tableData" 
        style="width: 100%" 
        table-layout="auto"
        empty-text="快告诉我你会什么吧 ！">
            <!-- <el-table-column prop="id" label="编号" width="100" /> -->

            <el-table-column prop="id" label="编号"  />
            <el-table-column prop="content" label="内容"  />

            <el-table-column fixed="right" label="操作" >
                <template #default="{ row }">
                    <el-button :type="getButtonType(row.status)" size="small" @click="toggleStatus(row)">{{
                        getButtonText(row.status) }}</el-button>
                    <el-button type="primary" size="small" @click="handleClick(row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button class="addButton" type="primary" size="large" @click="addNewSkills()">添加新技能</el-button>
    </el-main>

    <!-- 修改数据dialog -->
    <el-dialog v-model="dialogFormVisible" :title="changeTitle">
        <el-form :model="form">
            <el-form-item :label="changeLabel" :label-width="formLabelWidth">
                <el-input v-model="form.value" autocomplete="off" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cencleDialog">取消</el-button>
                <el-button type="primary" @click="saveDialogData()">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 添加数据dialog -->
    <el-dialog v-model="dialogFormVisibleAdd" :title="changeTitle">
        <el-form :model="form">
            <el-form-item :label="changeLabel" :label-width="formLabelWidth">
                <el-input v-model="form.value" autocomplete="off" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cencleDialog">取消</el-button>
                <el-button type="primary" @click="addDialogData()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from 'axios'
import VueCookies from 'vue-cookies'
import { reactive, getCurrentInstance, ref } from 'vue';

const { proxy } = getCurrentInstance();

const dialogFormVisible = ref(false);
const dialogFormVisibleAdd = ref(false);
const changeTitle = ref(''); // 弹框标题
const changeLabel = ref(''); // 输入框的标题

const tempRow = ref([]);

const form = reactive({
    value: "",
});

const loginInfo = VueCookies.get("loginInfo");
const account = loginInfo ? loginInfo.account : null; // 如果 loginInfo 存在，则从中取出 account 字段，否则返回 null

const tableData = ref([]);

const handleDelete = async(row) => {
    const url = "http://localhost:8081/api/deleteSkill"

    try{
        const data = {
            userAccount: account,
            id: row.id,
        }

        const res = await axios.post(url, data);
        
        if (res.data.code === 2000) {
            proxy.$message.success(res.data.message);
            getSkills();
        } else {
            proxy.$message.error(res.data.message);
            tableData.value = [];
        }
    }catch(e){
        proxy.$message.error(e);
    }
}

function handleClick(row) {
    // changeTitle.value = 
    changeTitle.value = "编辑第" + row.id + "条内容";
    changeLabel.value = "内容:";
    form.value = row.content;
    dialogFormVisible.value = true;
    tempRow.value = row;
}

const cencleDialog = () => {
    dialogFormVisible.value = false;
    dialogFormVisibleAdd.value = false;
}

async function saveDialogData() {
    const url = "http://localhost:8081/api/updateSkill"

    try {
        const data = {
            userAccount: account,
            skillContent: form.value,
            id: tempRow._rawValue.id,
        }

        console.log(data);

        const res = await axios.post(url, data);

        if (res.data.code === 2000) {
            proxy.$message.success(res.data.message);
            getSkills();
        } else {
            proxy.$message.error(res.data.message);
            tableData.value = [];
        }
    } catch (e) {
        proxy.$message.error(e);
    }
    dialogFormVisible.value = false;
}

async function addDialogData() {
    const url = "http://localhost:8081/api/addSkill"

    try {
        const data = {
            userAccount: account,
            skillContent: form.value,
        }
        if(form.value == "")
        {
            dialogFormVisibleAdd.value = false;
            return;
        }

        const res = await axios.post(url, data);

        if (res.data.code === 2000) {
            proxy.$message.success(res.data.message);
            getSkills();
        } else {
            proxy.$message.error(res.data.message);
        }
    } catch (e) {
        proxy.$message.error(e);
    }
    dialogFormVisibleAdd.value = false;
}

// 添加内容
function addNewSkills() {
    dialogFormVisibleAdd.value = true;
    changeTitle.value = "添加内容";
    changeLabel.value = "内容:";
    form.value = "";
}

const getSkills = async () => {
    const url = "http://localhost:8081/api/getSkillsUser"
    try {
        const data = {
            userAccount: account,
        };

        const res = await axios.post(url, data);
        console.log(res);

        if (res.data.code === 2000) {
            tableData.value = res.data.tableData;
        } else {
            proxy.$message.error(res.data.message);
            tableData.value = [];
        }
    } catch (e) {
        console.log(e);
        proxy.$message.error(res.data.message);
    }
}

async function toggleStatus(row) {
    try {
        const data = {
            userAccount: account,
            skillsStatus: row.status,
            id: row.id,
        }

        const url = "http://localhost:8081/api/changeSkillStatus"

        const res = await axios.post(url, data);
        if (res.data.code === 2000) {
            proxy.$message.success(res.data.message);
            row.status = res.data.status;
        } else {
            proxy.$message.error(res.data.message);
        }
    } catch (e) {
        console.log(e);
        proxy.$message.error(e);
    }

}

function getButtonText(status) {
    if (status === 1) {
        return "隐藏";
    } else if (status === 0) {
        return "显示";
    }
}

function getButtonType(status) {
    if (status === 1) {
        return "primary";
    } else if (status === 0) {
        return "danger";
    }
}

getSkills();
</script>

<style lang="scss">
// 自定义样式
.el-main {
    .el-table {
        // 添加样式
        background-color: #f5f7fa;
        border: none;

        .el-table-column {
            &.is-hidden {
                display: none;
            }

            &.is-disabled {
                .el-button {
                    opacity: 0.5;
                    cursor: not-allowed;
                }
            }
        }

        .el-button {
            &.addButton {
                margin-top: 20px;
            }
        }
    }
}
</style>
